<template>
  <!-- 门店详情 -->
  <div class="app-container shop-detail">
    <!-- <div class="head-title">{{$t('shopProcess.merchantDetail')}}</div> -->
    <!-- 导航栏 -->
    <div class="nav-box">
      <div class="nav">
        <div
          :class="['nav-item', navStatus === 0 ? 'active' : '']"
          @click="switchNav(0)"
        >
          {{ $t("shopProcess.basicInfo") }}
        </div>
        <div
          :class="['nav-item', navStatus === 4 ? 'active' : '']"
          @click="switchNav(4)"
        >
          {{ $t("shopProcess.storeDetails") }}
        </div>
        <div
          :class="['nav-item', navStatus === 1 ? 'active' : '']"
          @click="switchNav(1)"
        >
          {{ $t("shopProcess.businessInfo") }}
        </div>
        <div
          :class="['nav-item', navStatus === 2 ? 'active' : '']"
          @click="switchNav(2)"
        >
          {{ $t("shopProcess.financeInfo") }}
        </div>
        <!-- <div :class="['nav-item', navStatus === 3 ? 'active' : '']" @click="switchNav(3)">{{$t('outlet.permission')}}</div> -->
      </div>
    </div>
    <!-- 模块 -->
    <div class="shop-info-box">
      <!-- 基本信息 -->
      <div
        v-if="navStatus === 0"
        class="basic-info-mod"
      >
        <!-- 店铺审核状态 -->
        <div class="audit-status">
          <div
            v-if="shopBasicInfo"
            class="audit-item"
          >
            <span>{{ $t("shopProcess.auditStatus") }}：</span>
            <span v-if="shopBasicInfo.auditingStatus === -1">{{
              $t("shop.failed")
            }}</span>
            <span v-else-if="
                shopBasicInfo.shopAuditingStatus === 0 ||
                shopBasicInfo.shopProcessStatus === 4 ||
                shopBasicInfo.shopProcessStatus === 6
              ">{{ $t("product.pendingReview") }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 3">{{
              $t("brand.brandOffline")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 5">{{
              $t("brand.offlinePlatForm")
            }}</span>
            <span v-else-if="
                shopBasicInfo.shopStatus === 1 || shopBasicInfo.shopStatus === 0
              ">{{ $t("shop.passed") }}</span>
          </div>
          <div class="audit-item">
            <span>{{ $t("shopProcess.accountStatus") }}：</span>
            <span v-if="shopBasicInfo.accountStatus === 0">{{
              $t("shopProcess.disable")
            }}</span>
            <span v-else-if="shopBasicInfo.accountStatus === 1">{{
              $t("shopProcess.enable")
            }}</span>
            <span v-else-if="shopBasicInfo.accountStatus === -1">{{
              $t("shopProcess.delete")
            }}</span>
          </div>
          <div class="audit-item">
            <!-- 状态shopProcessStatus(-1, "开店申请未通过" 0, "开店申请待审核" 1, "停业中" 2, "营业中" 3, "门店下线" 4, "门店下线待审核" 5, "平台下线" 6, "平台下线待审核") -->
            <span>{{ $t("outlet.outletStatus") }}：</span>
            <span v-if="shopBasicInfo.shopProcessStatus === -1">{{
              $t("shopProcess.applyFail")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 0">{{
              $t("shopProcess.storeOpenPendingReview")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 1">{{
              $t("brand.closed")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 2">{{
              $t("brand.inOperation")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 3">{{
              $t("brand.brandOffline")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 4">{{
              $t("brand.brandOfflineToBeReviewed")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 5">{{
              $t("brand.platformOffline")
            }}</span>
            <span v-else-if="shopBasicInfo.shopProcessStatus === 6">{{
              $t("brand.platformOfflineToBeReviewed")
            }}</span>
          </div>
        </div>
        <!-- 信息主体 -->
        <div class="basic-info-list">
          <div class="left-info">
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.shopLogo") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                <el-image
                  class="shop-logo"
                  :src="resourcesUrl + shopBasicInfo.shopLogo"
                  :preview-src-list="
                    [resourcesUrl + shopBasicInfo.shopLogo]
                  "
                  alt=""
                  srcset=""
                />
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">{{ $t("outlet.outletId") }}：</p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.shopCode || "--" }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t("shop.shopImg") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt shop-imgs"
              >
                <el-image
                  class="shop-img"
                  v-for="(image, index) in shopBasicInfo.shopImgObj &&
                  shopBasicInfo.shopImgObj.images"
                  :key="index"
                  :src="resourcesUrl + image"
                  v-show="image"
                  :preview-src-list="
                    shopBasicInfo.shopImgObj.images
                      .filter((f) => f)
                      .map((m) => resourcesUrl + m)
                  "
                >
                </el-image>
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">门店展示图：</p>
              <p
                v-if="shopBasicInfo"
                class="txt shop-imgs"
              >
                <el-image
                  class="shop-img"
                  v-for="(image, index) in shopBasicInfo.shopHeadImgObj &&
                  shopBasicInfo.shopHeadImgObj.images"
                  :key="index"
                  :src="resourcesUrl + image"
                  v-show="image"
                  :preview-src-list="
                    shopBasicInfo.shopHeadImgObj.images
                      .filter((f) => f)
                      .map((m) => resourcesUrl + m)
                  "
                >
                </el-image>
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.outletName") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.shopName }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.shopAppName") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.shopAppName }}
              </p>
            </div>

            <!-- <div class="basic-info-item">
              <p class="tit"><span class="asterisk">*</span>{{$t('outlet.outletTag')}}：</p>
              <p v-if="shopBasicInfo" class="txt">{{ shopBasicInfo.outletTag }}</p>
            </div> -->

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.outletLabel") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.shopTagName }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.outletTag") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ $t("outlet.shopType" + shopBasicInfo.shopType) }}
              </p>
            </div>

            <!-- <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span
                >
                {{ $t("shopProcess.signingInfo") }}：
              </p>
              <p v-if="shopBasicInfo" class="txt">
                <span v-if="shopBasicInfo.firstCategoryName">
                  {{ shopBasicInfo.firstCategoryName }}
                </span>
                <span v-if="shopBasicInfo.secondCategoryName"
                  >&nbsp;>&nbsp;
                  {{ shopBasicInfo.secondCategoryName }}
                </span>
                <span v-if="shopBasicInfo.threeCategoryName"
                  >&nbsp;>&nbsp;
                  {{ shopBasicInfo.threeCategoryName }}
                </span>
              </p>
            </div> -->

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.shopShowingType") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{
                  [
                    "",
                    $t("outlet.showingType0"),
                    $t("outlet.showingType1"),
                    $t("outlet.showingType2"),
                  ][shopBasicInfo.shopShowingType]
                }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.theirBrand") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.brandName }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("o2oBrand.name") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.brandTagName }}
              </p>
            </div>

            <!-- <div class="basic-info-item">
              <p class="tit"><span class="asterisk">*</span>{{$t('outlet.addr')}}：</p>
              <p v-if="shopBasicInfo" class="txt">{{ ""+shopBasicInfo.province+shopBasicInfo.city+shopBasicInfo.area + shopBasicInfo.street }}</p>
            </div> -->

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.shopLocation") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{
                  shopBasicInfo.airportShopAddressObj &&
                  shopBasicInfo.airportShopAddressObj.airportShopAddressNames &&
                  shopBasicInfo.airportShopAddressObj.airportShopAddressNames.join(
                    "-"
                  )
                }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.detailAddr") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.shopAddress }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.userName") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.userName }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("brand.contactName") }}：
              </p>
              <p
                v-if="shopBasicInfo && shopBasicInfo.shopOwner"
                class="txt"
              >
                {{ shopBasicInfo.shopOwner }}
              </p>
              <p
                v-else
                class="txt weak"
              >{{ $t("order.notYet") }}</p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.tel") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >{{ shopBasicInfo.tel }}</p>
            </div>
            <!-- <div class="basic-info-item">
              <p class="tit"><span class="asterisk">*</span>{{$t('shopProcess.email')}}：</p>
              <p v-if="shopBasicInfo" class="txt">{{ shopBasicInfo.email }}</p>
            </div> -->
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.businTime") }}：
              </p>
              <p
                v-if="
                  shopBasicInfo &&
                  shopBasicInfo.openTime &&
                  shopBasicInfo.closeTime
                "
                class="txt"
              >
                {{
                  convertTimeFormat(shopBasicInfo.openTime) +
                  "--" +
                  convertTimeFormat(shopBasicInfo.closeTime)
                }}
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("outlet.businStatus") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                <span v-if="shopBasicInfo.shopStatus === 0">{{
                  $t("outlet.close")
                }}</span>
                <span v-if="shopBasicInfo.shopStatus === 1">{{
                  $t("outlet.normal")
                }}</span>
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">{{ $t("outlet.outletService") }}：</p>
              <div
                v-if="
                  shopBasicInfo &&
                  shopBasicInfo.provisions &&
                  shopBasicInfo.provisions.length > 0
                "
                class="txt"
              >
                <div class="serviceBox">
                  <div
                    v-for="(item, index) in shopBasicInfo.provisions"
                    :key="item.id"
                  >
                    {{ item.name }}
                    <span v-if="index < shopBasicInfo.provisions.length - 1">、</span>
                  </div>
                </div>
              </div>
              <p
                v-if="
                  !(
                    shopBasicInfo.provisions &&
                    shopBasicInfo.provisions.length > 0
                  )
                "
                class="txt"
              >
                --
              </p>
            </div>
            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("order.delType") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ DeliveryMode() }}
              </p>
            </div>

            <div class="basic-info-item">
              <p class="tit">
                <!-- <span class="asterisk">*</span> -->
                {{ $t("product.discountFactor") }}：
              </p>
              <p
                v-if="shopBasicInfo"
                class="txt"
              >
                {{ shopBasicInfo.employeePrice }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <!-- /基本信息 -->

      <!-- 工商信息 -->
      <div
        v-if="navStatus === 1"
        class="basic-info-mod"
      >
        <div class="basic-info-list">
          <div
            class="right-info"
            v-if="businessInfo"
          >
            <div class="basic-info-item">
              <p class="tit">
                <span class="asterisk">*</span>{{ $t("outlet.operatingPeriod") }}：
              </p>
              <p class="txt">
                {{
                  businessInfo.startTime.split(" ")[0] +
                  "--" +
                  (!businessInfo.endTime
                    ? this.$i18n.t("shopProcess.noFixedTerm")
                    : businessInfo.endTime.split(" ")[0])
                }}
              </p>
            </div>
            <div
              class="basic-info-item"
              v-if="businessInfo"
            >
              <p class="tit">
                <span class="asterisk">*</span>{{ $t("shopProcess.businessLicense") }}：
              </p>
              <el-image
                class="img-static"
                v-if="businessInfo.businessLicense"
                :src="getImgSrc(businessInfo.businessLicense)"
                :preview-src-list="
                  businessInfo.businessLicense.indexOf('http') === 0
                    ? [businessInfo.businessLicense]
                    : [resourcesUrl + businessInfo.businessLicense]
                "
              />
            </div>
            <div
              class="basic-info-item"
              v-if="businessInfo"
            >
              <p class="tit">
                <!-- <span class="asterisk">*</span
                > -->
                {{ $t("shopProcess.corporateIdentityCard") }}：
              </p>
              <div class="txt bg-img">
                <el-image
                  class="img-static"
                  v-if="businessInfo.identityCardFront"
                  :src="getImgSrc(businessInfo.identityCardFront)"
                  :preview-src-list="
                    businessInfo.identityCardFront
                      ? businessInfo.identityCardFront.indexOf('http') === 0
                        ? [businessInfo.identityCardFront]
                        : [resourcesUrl + businessInfo.identityCardFront]
                      : []
                  "
                />
                <el-image
                  class="img-static"
                  v-if="businessInfo.identityCardLater"
                  :src="getImgSrc(businessInfo.identityCardLater)"
                  :preview-src-list="
                    businessInfo.identityCardLater
                      ? businessInfo.identityCardLater.indexOf('http') === 0
                        ? [businessInfo.identityCardLater]
                        : [resourcesUrl + businessInfo.identityCardLater]
                      : []
                  "
                />
              </div>
            </div>

            <div
              class="basic-info-item"
              v-if="businessInfo"
            >
              <p class="tit">国境口岸卫生许可证：</p>
              <el-image
                v-if="businessInfo.borderPortHealthLicense"
                class="img-static"
                :src="getImgSrc(businessInfo.borderPortHealthLicense)"
                :preview-src-list="
                  businessInfo.borderPortHealthLicense &&
                  businessInfo.borderPortHealthLicense.indexOf('http') === 0
                    ? [businessInfo.borderPortHealthLicense]
                    : [resourcesUrl + businessInfo.borderPortHealthLicense]
                "
              />
            </div>
          </div>
        </div>
      </div>
      <!-- /工商信息 -->

      <!-- 财务信息 -->
      <div
        v-if="navStatus === 2"
        class="financial-info"
      >
        <div class="table-box">
          <div class="tips">
            <p class="tit">
              <span class="asterisk">*</span>{{ $t("shopProcess.settlementAccount") }}
            </p>
            <p class="txt weak">
              {{ $t("shopProcess.added") }}
              <span class="txt-bold">{{ settlementAccounts.length }}</span>
              {{ $t("shopProcess.piece")
              }}{{ $t("shopProcess.settlementAccount") }},{{
                $t("shopProcess.mostAdd")
              }}
              <span class="txt-bold">5</span>
              {{ $t("shopProcess.piece")
              }}{{ $t("shopProcess.settlementAccount") }}
            </p>
          </div>
          <el-table
            :data="settlementAccounts"
            header-cell-class-name="table-header"
            style="width: 100%; padding-top: 20px"
          >
            <el-table-column
              prop="bankName"
              :label="this.$i18n.t('shopProcess.bankName')"
            />
            <el-table-column
              prop="recipientName"
              :label="this.$i18n.t('shopProcess.recipientName')"
            />
            <el-table-column
              prop="cardNo"
              :label="this.$i18n.t('shopProcess.account')"
            />
            <el-table-column
              prop="openingBank"
              :label="this.$i18n.t('shopProcess.openingBank')"
            />
            <el-table-column
              prop="isDefault"
              :label="this.$i18n.t('shopProcess.masterAccount')"
              align="center"
              width="140"
            >
              <template slot-scope="scope">
                {{
                  scope.row.isDefault
                    ? $t("shopProcess.yes")
                    : $t("shopProcess.no")
                }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- /财务信息 -->
      <!-- 权限设置 -->
      <div
        v-if="navStatus === 3"
        class="content-wrap"
      >
        <div>
          <el-form
            @submit.native.prevent
            ref="shopSetForm"
            :model="outletSetList"
            :label-width="$t('language') === 'English' ? '280px' : '140px'"
            size="small"
          >
            <div class="ci-wrapper">
              <div>
                <!-- 门店自定义装修 -->
                <el-form-item
                  :label="$t('outlet.storeCustomDecoration')"
                  prop="customRenovation"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customRenovation"
                      :disabled="true"
                    >
                      <el-radio :label="1">{{
                        $t("outlet.startUsing")
                      }}</el-radio>
                      <el-radio :label="0">{{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip6") }}</div>
                </el-form-item>
                <!-- 门店自定义运费 -->
                <el-form-item
                  :label="$t('outlet.storeCustomShippingCharges')"
                  prop="customFreightAmount"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customFreightAmount"
                      :disabled="true"
                    >
                      <el-radio :label="1">{{
                        $t("outlet.startUsing")
                      }}</el-radio>
                      <el-radio :label="0">{{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip2") }}</div>
                </el-form-item>
                <!-- 门店自建营销活动 -->
                <el-form-item
                  :label="$t('outlet.storesBuildTheirOwnMarketingActivities')"
                  prop="customSales"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customSales"
                      :disabled="true"
                    >
                      <el-radio :label="1">
                        {{ $t("outlet.startUsing") }}</el-radio>
                      <el-radio :label="0"> {{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip3") }}</div>
                </el-form-item>
                <!-- 门店自行管理商品 -->
                <el-form-item
                  :label="$t('outlet.storesManageTheirOwnMerchandise')"
                  prop="customProd"
                >
                  <div class="txt">
                    <el-radio-group
                      v-model="outletSetList.customProd"
                      :disabled="true"
                    >
                      <el-radio :label="1">
                        {{ $t("outlet.startUsing") }}</el-radio>
                      <el-radio :label="0"> {{ $t("outlet.close") }}</el-radio>
                    </el-radio-group>
                  </div>
                  <div class="tips">{{ $t("outlet.outletTip4") }}</div>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <!-- /权限设置 -->
    </div>

    <!-- 脚部 -->
    <div
      v-if="pageType === 'toAudit'"
      class="footer"
    >
      <div class="foot-box">
        <div
          class="default-btn primary-btn"
          @click="openAuditPopup(1)"
        >
          {{ $t("brand.passed") }}
        </div>
        <div
          class="default-btn"
          @click="openAuditPopup(-1)"
        >
          {{ $t("shopProcess.reject") }}
        </div>
      </div>
    </div>

    <!-- 审核弹窗 -->
    <el-dialog
      :visible.sync="auditDialogVisible"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      class="audit-dialog"
    >
      <div class="content">
        <div class="head">
          <span class="tit">{{ $t("shopProcess.merchantReview") }}</span>
          <span class="sub-tit">{{ $t("shopProcess.addSigning") }}</span>
        </div>
        <el-form
          @submit.native.prevent
          ref="auditform"
          label-width="auto"
          :model="auditform"
          :rules="auditformRules"
          size="small"
        >
          <el-form-item
            :label="this.$i18n.t('shopProcess.shopType')"
            prop="shopType"
          >
            <el-radio-group v-model="auditform.shopType">
              <el-radio :label="0">{{
                $t("shopProcess.ordinaryShop")
              }}</el-radio>
              <el-radio :label="1">{{
                $t("shopProcess.preferredGoodShop")
              }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <div
          class="default-btn"
          @click="auditDialogVisible = false"
        >
          {{ $t("remindPop.cancel") }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="reviewStoreApplications(1)"
        >
          {{ $t("shopProcess.submit") }}
        </div>
      </span>
    </el-dialog>
    <!-- 驳回弹窗 -->
    <el-dialog
      :title="this.$i18n.t('shopProcess.rejectRemarks')"
      :visible.sync="reviewDialogVisible"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
      class="remarks"
    >
      <el-input
        v-model="remarks"
        type="textarea"
        :rows="2"
        maxlength="200"
        :placeholder="this.$i18n.t('shopProcess.rejectInputTips')"
      />

      <span
        slot="footer"
        class="dialog-footer"
      >
        <div
          class="default-btn"
          @click="reviewDialogVisible = false"
        >
          {{ $t("remindPop.cancel") }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="reviewStoreApplications(-1)"
        >
          {{ $t("shopProcess.submit") }}
        </div>
        <!-- <el-button @click="reviewDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="reviewStoreApplications(-1)">提交</el-button> -->
      </span>
    </el-dialog>

    <outletInfoDetails
      v-model="shopBasicInfo"
      v-if="navStatus === 4"
    />
    <!-- 图片预览 -->
    <!-- <picture-preview v-if="picturePreviewVisible" ref="picturePreview" /> -->
  </div>
</template>

<script>
import { Debounce } from "@/utils/debounce";
import { convertTimeFormat } from "@/utils/index";
// import * as api from '@/api/platform/audit-shop'
// import picturePreview from '@/components/PicturePreview'
import outletInfoDetails from "./outlet-info-details.vue";
export default {
  components: {
    outletInfoDetails,
  },
  // components: {
  //   picturePreview
  // },
  data() {
    return {
      // 图片前缀
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      // 图片预览
      picturePreviewVisible: false,
      shopId: Number(this.$route.query.shopId) || 0,
      // 页面类型 查看详情/审核申请
      pageType: this.$route.query.pageType || "",
      // 导航切换
      navStatus: 0,

      // 店铺基本信息
      shopBasicInfo: {},

      // 店铺工商信息
      businessInfo: {
        foundTime: "",
        startTime: "",
        endTime: "",
        businessLicense: "",
        identityCardFront: "",
        identityCardLater: "",
      },

      // 店铺财务信息
      settlementAccounts: [],

      // 审核信息
      auditform: {
        date: [],
        shopType: null,
      },
      // 审核弹窗
      auditDialogVisible: false,
      // 商家类型
      merchantType: 0,
      auditformRules: {
        date: [
          {
            required: true,
            message: this.$i18n.t("shopProcess.contractValidityNotEmpty"),
            trigger: "change",
          },
        ],
        shopType: [
          {
            required: true,
            message: this.$i18n.t("shopProcess.selectShopType"),
            trigger: "change",
          },
        ],
      },
      // 驳回弹窗
      reviewDialogVisible: false,
      // 签约结束日期
      contractEndTime: "",
      // 签约开始日期
      contractStartTime: "",
      // 驳回备注
      remarks: "",
      outletSetList: {
        customFreightAmount: "",
        customProd: "",
        customRenovation: "",
        customSales: "",
      },
    };
  },
  mounted() {
    // 查询基本信息
    this.getDataList();
    // 店铺审核状态
    // this.queryShopAuditStatus()
  },

  methods: {
    convertTimeFormat,
    DeliveryMode() {
      let result = [];
      if (this.shopBasicInfo.hasCityDelivery) {
        result.push(this.$t("product.sameCityDelivery"));
      }
      if (this.shopBasicInfo.hasUserPickUp) {
        result.push(this.$t("product.userPickUp"));
      }
      if (this.shopBasicInfo.hasShopDelivery) {
        result.push(this.$t("product.ExpressDistribution"));
      }
      return result.join(" / ");
    },
    switchNav(value) {
      this.navStatus = value;
      this.getDataList(value);
    },

    // 获取门店信息
    getDataList(value = 0) {
      this.$http({
        url: this.$http.adornUrl("/platform/shop/info/" + this.shopId),
        method: "get",
        params: this.$http.adornParams(),
      }).then(({ data }) => {
        if (value === 0) {
          this.shopBasicInfo = data.shopDetail;
          this.contractStartTime = data.shopDetail.contractStartTime;
          this.contractEndTime = data.shopDetail.contractEndTime;
        } else if (value === 1) {
          this.businessInfo = data.company;
        } else if (value === 2) {
          this.settlementAccounts = data.shopBankCards;
        } else if (value === 3) {
          this.outletSetList = data.shopConfig;
        }
      });
    },

    /**
     * 获取图片路径
     */
    getImgSrc(img) {
      if (!img) {
        return "";
      }
      if (img.indexOf("http://") === 0 || img.indexOf("https://") === 0) {
        return img;
      }
      return this.resourcesUrl + img;
    },

    /**
     * 打开审核弹窗
     */
    openAuditPopup(status) {
      if (status === 1) {
        // 审核
        this.auditDialogVisible = true;
        return;
      }
      if (status === -1) {
        // 驳回
        this.remarks = "";
        this.reviewDialogVisible = true;
      }
    },
    /**
     * 提交店铺申请审核
     */
    reviewStoreApplications: Debounce(function (status) {
      let param = {};
      param = {
        shopId: this.shopId,
        status: status, // 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核
        contractStartTime: this.contractStartTime,
        contractEndTime: this.contractEndTime,
      };
      // 审核
      if (status === 1) {
        this.$refs.auditform.validate((valid) => {
          if (!valid) {
            return;
          }
          param.shopType = this.auditform.shopType;
          this.auditApply(status, param);
        });
        return;
      }
      // 驳回，备注必填
      if (status === -1) {
        if (!this.remarks.trim() || this.remarks.trim().length > 200) {
          this.$message({
            message: this.$i18n.t("shopProcess.rejectRemarks"),
            type: "error",
            duration: 1000,
          });
          return;
        }
        param.remarks = this.remarks.trim(); // 驳回备注
        this.auditApply(status, param);
      }
    }),

    auditApply(status, param) {
      this.$http({
        url: this.$http.adornUrl("/shop/shopAuditing/audit"),
        method: "put",
        data: this.$http.adornData(param),
      }).then(({ data }) => {
        this.$message({
          message:
            status === 1
              ? this.$i18n.t("shopProcess.auditPass")
              : this.$i18n.t("shopProcess.applyFailed"),
          type: "success",
          duration: 1000,
        });
        if (status === 1) {
          this.$refs["auditform"].resetFields(); // 清空表单
          this.$refs["auditform"].clearValidate(); // 表单验证关闭时清除错误验证信息
          this.auditDialogVisible = false;
        } else {
          this.remarks = "";
          this.reviewDialogVisible = false;
        }
        this.$router.push("/platform-outlet/auditOutlet");
      });
    },

    /**
     * 图片预览
     */
    picturePreview(imgUrl) {
      this.picturePreviewVisible = true;
      this.$nextTick(() => {
        this.$refs.picturePreview.init(imgUrl);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shop-logo {
  max-width: 200px;
  border-radius: 6px;
}
.app-container {
  margin-bottom: 30px;
}
.app-container.shop-detail {
  font-size: 14px;
  color: #333;
  min-height: 852px;
  .head-title {
    margin-bottom: 15px;
  }

  .red-tag-txt {
    color: #ff4949;
  }

  // 导航栏
  .nav-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .nav {
      position: relative;
      display: inline-block;
      display: flex;
      white-space: nowrap;
      .nav-item {
        margin: 0;
        font-size: 14px;
        line-height: 1em;
        padding: 15px 20px;
        color: #333;
        cursor: pointer;
      }
      .nav-item.active {
        color: #155bd4;
        // background: rgba(24,144,255, 0.06);
        border-radius: 4px 4px 0 0;
        border-bottom: 2px solid #155bd4;
      }
    }
  }
  .nav-box::before {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    border-bottom: 1px solid #f0f0f0;
    content: '';
  }

  .shop-info-box {
    // margin-bottom: 80px;
    // 公共
    p {
      margin: 0;
    }
    .asterisk {
      color: #ff2120;
      padding-right: 5px;
    }
    .tips {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      .tit {
        font-size: 16px;
        min-width: 80px;
      }
      .txt.weak {
        font-size: 12px;
        color: #999;
        margin-left: 10px;
      }
      .txt-bold {
        color: #333;
      }
    }
    .si-content {
      margin-top: 20px;
      margin-bottom: 25px;
    }
    .table-box {
      display: block;
      width: 100%;
      margin: 20px 0;
      & >>> .el-table th,
      .el-table td {
        border-color: #f0f0f0;
      }
      & >>> .el-table__body-wrapper {
        max-height: 245px;
        overflow-y: scroll;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE 10+ */
      }
      & >>> .el-table__body-wrapper::-webkit-scrollbar {
        display: none; /* Chrome Safari */
      }
      & >>> .el-table__body {
        width: 100%;
      }
    }
    // 图片
    .tab-img {
      width: 60px;
      height: 60px;
      margin-right: 5px;
      cursor: pointer;
    }

    .business-info-item {
      width: 40%;
      display: flex;
      align-items: top;
      justify-content: flex-start;
      margin-bottom: 20px;
      line-height: 32px;
      p.tit {
        width: 155px;
        text-align: right;
      }
      // .img-static {
      //   display: block;
      //   width: auto;
      //   max-width: 80px;
      //   height: auto;
      //   max-height: 80px;
      //   margin-right: 10px;
      //   cursor: pointer;
      // }
    }

    .img-static {
      display: block;
      width: 100px;
      height: 100px;
      margin-right: 15px;
      border-radius: 10px;
    }

    // 基本信息模块
    .basic-info-mod {
      // 审核状态
      .audit-status {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #f7f8fa;
        padding: 20px;
        line-height: 1em;
        margin-top: 20px;
        color: #333;
        p.tit {
          width: 110px;
        }
        .weak {
          color: #666;
        }
      }
      // 基本信息 & 工商信息
      .basic-info-list {
        display: flex;
        align-items: top;
        justify-content: flex-start;
        width: 100%;
        margin: 30px 0;
        .left-info {
          width: 40%;
        }
        .basic-info-item {
          display: flex;
          justify-content: flex-start;
          margin-bottom: 30px;
          line-height: 24px;
          .tit {
            width: 155px;
            min-width: 155px;
            text-align: right;
            margin-right: 15px;
          }
          .txt {
            display: block;
            word-break: break-all;
            letter-spacing: 1px;
            line-break: anywhere;
            &.weak {
              color: #bbb;
            }
          }

          // 背景图
          .bg-img {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            text-align: center;
            .bg-img-item {
              .img-static {
                display: inline-block;
                margin-right: 0;
              }
            }
            .bg-img-item:not(:last-child) {
              margin-right: 10px;
            }
            .img-tips {
              display: block;
              text-align: center;
              font-size: 12px;
              color: #666;
              line-height: 1.5em;
              margin-top: 8px;
              p {
                margin: 0;
                padding: 0;
              }
            }
          }
        }
      }
    }
    // 财务信息
    .financial-info {
      margin: 30px 0;
      .tips {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-bottom: 20px;
        .txt {
          margin-right: 5px;
          .date-block {
            display: inline-block;
            padding: 5px 8px;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
            color: #155bd4;
            font-weight: bold;
          }
          .date-block {
            margin-right: 5px;
          }
        }
      }
      .table-box {
        margin-top: 10px;
        & >>> .el-table__body-wrapper {
          max-height: 504px;
        }
      }
    }
  }

  // 脚部
  .footer {
    z-index: 8;
    width: 86%;
    position: fixed;
    bottom: 0;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 4px 2px 5px 5px #eee;
    background: #fff;
    margin-left: -20px;
    .foot-box {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .btn {
        padding: 10px 20px;
        margin-right: 10px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
      }
      .btn:first-child {
        background: #155bd4;
        color: #fff;
      }
      .btn:last-child {
        border: 1px solid #d9d9d9;
      }
    }
  }
}
// 审核弹窗
.audit-dialog.el-dialog__wrapper {
  & >>> .el-dialog__header {
    padding: 0;
    padding-bottom: 0;
  }
  & >>> .el-dialog__body {
    padding-top: 0;
    padding-bottom: 0;
  }
  .content {
    .head {
      line-height: 1em;
      font-size: 16px;
      color: #333;
      padding: 15px 0;
      margin-bottom: 10px;
      .sub-tit {
        color: #999;
        font-size: 12px;
        margin-left: 10px;
      }
    }
    & >>> .el-form {
      margin-top: 20px;
    }
    & >>> .el-range-separator {
      width: 10%;
    }
  }
}

.serviceBox {
  display: flex;
  flex-wrap: wrap;
}
.content-wrap {
  margin: 30px;
}

.shop-imgs {
  display: flex !important;
  width: 100%;
}
.shop-img {
  flex: none;
  margin-left: 10px;
  max-width: 100px;
}
</style>
